<template>
  <div>
    <van-nav-bar
      title="编辑地址"
      left-text="返回"
      left-arrow
      @click-left="back">
      <template #left>
        <van-icon name="arrow-left" size="20"/>
      </template>
    </van-nav-bar>
    <van-form
      @submit="onSubmit">
      <div class="van-address-edit">
        <div class="van-address-edit__fields">

          <van-field v-model="form.name" name="name" placeholder="收货人姓名" label="姓名"
                     :rules="[{ required: true, message: '请填写收件人姓名' }]"/>
          <van-field name="tel"  v-model="form.tel" label="电话" placeholder="收货人电话" type="tel"
                     :rules="[{ required: true, message: '请填写电话' }]"/>
          <van-field
            readonly
            is-link
            clickable
            name="area"
            :value="area"
            label="地区"
            placeholder="点击选择省市区"
            @click="showArea = true"
            :rules="[{ required: true, message: '请选择地区' }]"
          />
          <van-field v-model="form.addressDetail" label="详细地址"
                     placeholder="街道门牌、楼层房间号等信息"
                     :rules="[{ required: true, message: '请填写详细地址' }]"/>
        </div>
      </div>
      <div class="van-address-edit">
        <div class="van-address-edit__fields">
          <van-cell-group>
            <van-field
              v-model="message"
              rows="3"
              autosize
              label="智能填写"
              type="textarea"
              maxlength="100"
              @input="onInput"
              placeholder="粘贴如：河南省郑州市二七区二七广场450000，王小二，13688668866"
              show-word-limit
            />

          </van-cell-group>
        </div>
      </div>
      <div class="van-address-edit">
        <div class="van-address-edit__fields">

          <van-field name="isDefault" label="设置默认地址" input-align="right"
                     label-width="200">
            <template #input>
              <van-switch v-model="form.isDefault"  size="20"/>
            </template>
          </van-field>
        </div>
      </div>
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>

    <van-popup v-model="showArea" position="bottom">
      <van-area
        :area-list="areaList"
        @confirm="onConfirm"
        :columns-placeholder="['请选择', '请选择', '请选择']"
      />
    </van-popup>

  </div>
</template>

<script>
import {Toast} from 'vant'
import {areaList} from '@vant/area-data'
import {addressDetail, addressSave} from '../../../api/user'

export default {
  name: 'edit',
  created () {
    this.initData()
  },
  data () {
    return {
      message: '',
      form: {
        isDefault: false
      },
      searchResult: [],
      showArea: false,
      areaList,
      username: '',
      password: ''
    }
  },
  computed: {
    area () {
      if (this.form.city != null && this.form.province != null && this.form.county != null) {
        return this.form.province + this.form.city + this.form.county
      } else {
        return ''
      }
    }
  },
  methods: {
    initData () {
      let id = this.$route.params.id
      if (id !== null && id !== undefined) {
        addressDetail({id: id}).then(res => {
          this.form = res.data.data
        })
      }
    },
    back () {
      this.$router.back()
    },
    onSubmit (values) {
      addressSave(this.form).then(res => {
        let id = this.$route.params.id
        if (id == null) {
          Toast('地址添加成功')
        } else {
          Toast('地址修改成功')
        }
      })
    },
    onFailed (data) {
      console.log(data)
    },
    onInput () {
      let smartParse = this.smartParse(this.message)
      this.$set(this.form, 'name', smartParse.name)
      this.$set(this.form, 'tel', smartParse.tel)
      this.$set(this.form, 'address', smartParse.address)
      this.$set(this.form, 'city', smartParse.city)
      this.$set(this.form, 'county', smartParse.county)
      this.$set(this.form, 'province', smartParse.province)
    },
    onConfirm (values) {
      console.log(values)
      values = values
        .filter((item) => !!item)
        .map((item) => item.name)
      this.$set(this.form, 'province', values[0])
      this.$set(this.form, 'city', values[1])
      this.$set(this.form, 'county', values[2])
      this.showArea = false
      console.log(this.form)
    },
    onSave (content) {
      console.log(content)
    },
    onDelete () {
      Toast('delete')
    },
    onChangeDefault (status) {

    },
    onChangeDetail (val) {
      if (val) {
        this.searchResult = [
          {
            name: '黄龙万科中心',
            address: '杭州市西湖区'
          }
        ]
      } else {
        this.searchResult = []
      }
    }
  }
}
</script>

<style scoped>
.switch-class {
  flex: 1;
}
</style>
